
<div class="span6">
    <h4 style="text-align: center"> Devis </h4>
    <div id="nombre_devis_client" style="height:300px; width:100%;"></div>
    <h4 style="text-align: center"> Bon Commande </h4>
    <div id="nombre_bc_client" style="height:300px; width:100%;"></div>
    <h4 style="text-align: center"> Bon Livraison </h4>
    <div id="nombre_bl_client" style="height:300px; width:100%;"></div>
    <h4 style="text-align: center"> Facture </h4>
    <div id="nombre_facture_client" style="height:300px; width:100%;"></div>
</div>
<div class="span6">
    <div class="box">
        <div class="title">
            <h4>
                <span class="icon16 brocco-icon-grid"></span>
                <span style="text-align: center">Information Client</span>
            </h4>
            <a class="minimize" href="#" style="display: none;">Minimize</a>
        </div>
        <div class="content">
            <p><h4>Solde: {{client.solde}}</h4></p>
            <p><h4>Limite Credit: {{client.limiteCredit}}</h4></p>
            </br>
            <p><h4>Devis Cloturé: {{statistique.devis.cloturer}}</h4></p>
            <p><h4>Devis Non Cloturé: {{statistique.devis.non_cloturer}}</h4></p>
            </br>
            <p><h4>Bon Commande Cloturé: {{statistique.bon_commande.cloturer}}</h4></p>
            <p><h4>Bon Commande Non Cloturé: {{statistique.bon_commande.non_cloturer}}</h4></p>
            </br>
            <p><h4>Bon Livraison Réglé: {{statistique.bon_livraison.regle}}</h4></p>
            <p><h4>Bon Livraison Partiellement Réglé: {{statistique.bon_livraison.partiellement_regle}}</h4></p>
            <p><h4>Bon Livraison Non Réglé: {{statistique.bon_livraison.non_regle}}</h4></p>
            </br>
            <p><h4>Facture Réglé: {{statistique.facture.regle}}</h4></p>
            <p><h4>Facture Partiellement Réglé: {{statistique.facture.partiellement_regle}}</h4></p>
            <p><h4>Facture Non Réglé: {{statistique.facture.non_regle}}</h4></p>
        </div>
    </div>
</div>
</div>

<script>
    $(document).ready(function() {


        var data3 = [
            ['Cloturé', {{statistique.devis.cloturer}}], ['non Cloturé', {{statistique.devis.non_cloturer}}]
        ];

        var plot3 = jQuery.jqplot('nombre_devis_client', [data3],
                {
                    seriesDefaults: {
                        // Make this a pie chart.
                        renderer: jQuery.jqplot.PieRenderer,
                        rendererOptions: {
                            // Put data labels on the pie slices.
                            // By default, labels show the percentage of the slice.
                            showDataLabels: true
                        }
                    },
                    legend: {show: true, location: 'e'}
                }
        );
        var data4 = [
            ['Cloturé', {{statistique.bon_commande.cloturer}}], ['non Cloturé', {{statistique.bon_commande.non_cloturer}}]
        ];

        var plot4 = jQuery.jqplot('nombre_bc_client', [data4],
                {
                    seriesDefaults: {
                        // Make this a pie chart.
                        renderer: jQuery.jqplot.PieRenderer,
                        rendererOptions: {
                            // Put data labels on the pie slices.
                            // By default, labels show the percentage of the slice.
                            showDataLabels: true
                        }
                    },
                    legend: {show: true, location: 'e'}
                }
        );
        var data5 = [
            ['Réglé', {{statistique.bon_livraison.regle}}],
            ['Partiellement Réglé', {{statistique.bon_livraison.partiellement_regle}}],
            ['Non Réglé', {{statistique.bon_livraison.non_regle}}]

        ];

        var plot5 = jQuery.jqplot('nombre_bl_client', [data5],
                {
                    seriesDefaults: {
                        // Make this a pie chart.
                        renderer: jQuery.jqplot.PieRenderer,
                        rendererOptions: {
                            // Put data labels on the pie slices.
                            // By default, labels show the percentage of the slice.
                            showDataLabels: true
                        }
                    },
                    legend: {show: true, location: 'e'}
                }
        );
        var data6 = [
            ['Réglé', {{statistique.facture.regle}}],
            ['Partiellement Réglé', {{statistique.facture.partiellement_regle}}],
            ['Non Réglé', {{statistique.facture.non_regle}}]
        ];

        var plot6 = jQuery.jqplot('nombre_facture_client', [data6],
                {
                    seriesDefaults: {
                        // Make this a pie chart.
                        renderer: jQuery.jqplot.PieRenderer,
                        rendererOptions: {
                            // Put data labels on the pie slices.
                            // By default, labels show the percentage of the slice.
                            showDataLabels: true
                        }
                    },
                    legend: {show: true, location: 'e'}
                }
        );


    });
    </script>
